<template>
  <div class="app-page">
    <div class="shopper">
      <div class="img">
        <img src="../../static/img/shop.png" alt="">
      </div>
      <div class="shopper_info">
        <p class="shopper_name">{{siteInfo.siteName}}</p>
        <p class="shopper_address">{{siteInfo.siteAddress}}</p>
      </div>
      <div class="get_more">
        <button @click="goHistroy()" class="can">提现历史</button>
      </div>
    </div>
    <div class="shop_monery">
      <div class="info_left">
        <p class="totalAmount">
          <span>累计金额：</span>
          <span class="num">
            <em class="little">￥</em>{{siteInfo.balance}}</span>
        </p>
        <p class="tip">
          满{{cashLevel}}元可提现
        </p>
      </div>
      <div class="info">
        <router-link :to="'/getmoney'" v-if="siteInfo.balance>=cashLevel">
          <button class="can">申请提现</button>
        </router-link>
        <button class="" v-else>申请提现</button>
      </div>
    </div>
    <div class="times">
      <p>{{currentTime}}</p>
    </div>
    <div class="shop_more">
      <div class="left">
        <p>充电数</p>
        <p>
          <b>{{orderCash.chargeNum}}</b>次</p>
      </div>
      <div class="right">
        <p>本月分成</p>
        <p>
          <b>{{orderCash.shareAmount}}</b>元</p>
      </div>
    </div>
    <div class="return_back">
      <button @click="logout">退出登录</button>
    </div>
  </div>
</template>
<script>
import { getShopInfo, getShopOrderCash, logout } from '../service/index';

export default {
  data() {
    return {
      cashLevel: 50,
      orderCash: {},
      siteInfo: {
        siteName: '',
        siteAddress: '',
        balance: 0,
      },
    };
  },
  computed: {
    currentTime() {
      let now = new Date();
      return `${now.getFullYear()}年${now.getMonth() + 1}月`;
    },
  },
  methods: {
    goHistroy() {
      this.$router.push({ name: 'shoplist' });
    },
    loadInfo() {
      let param = {};
      getShopInfo(param)
        .then(res => {
          this.siteInfo = res;
          this.$store.commit('TOTALAMOUNT_CHANGE', res.balance);
        });
    },
    loadOrderInfo() {
      let param = {};
      getShopOrderCash(param)
        .then(res => {
          this.orderCash = res;
        });
    },
    logout() {
      if (confirm('确认退出当前账号吗？')) {
        let param = {};
        logout(param)
          .then(res => {
            let openid = this.$store.state.openid;
            this.$store.commit('LOGOUT');
            console.log(this.$router);
            this.$router.push({ name: 'index', query: { openid, out: 1 } });
          })
          .catch(ex => {
            alert(ex);
          });
      }
    },
  },
  mounted() {
    if (this.$store.state.isLogin) {
      this.loadInfo();
      this.loadOrderInfo();
    } else {
      let openid = this.$store.state.openid;
      this.$router.replace({ name: 'index', query: { openid, out: 1 } });
    }
  },
};
</script>

<style scoped lang="less">
@import (reference) "../style/less/app.less";
.shopper {
  padding: .8rem;
  background: #29B171;
  line-height: 1.2;
  font-size: 14px;
  color: #fff;
  display: flex;
  .img {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: .15rem solid #259C64;
    overflow: hidden; // background: url('../../static/img/battery.png') no-repeat center;
    img {
      width: 100%;
      height: 100%;
      border: none;
    }
  }
  .totalAmount {
    vertical-align: bottom;
    line-height: 1;
  }
  .shopper_info {
    margin-left: .5rem;
    width: 10rem;
    padding-top: .35rem;
    line-height: 1.5;
    flex: 1;
    >p {
      color: #fff;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .shopper_address {
      font-size: 12px;
    }
  }

  .get_more {
    button {
      .button-solid(#fff, transparent, #fff);
      font-size: 12px;
      padding: .2rem .3rem;
      margin-top: .5rem;
    }
  }
}

.shop_monery {
  display: flex;
  padding: 1rem .8rem;
  border-bottom: 1px solid #eaeaea;
  .info_left {
    width: 12.2rem;
    padding-left: 1rem;
    font-size: 16px;
    color: #000;
    background: url('../../static/img/money.png') no-repeat left 8px;
    background-size: .7rem;
    .num {
      color: #f77;
      font-size: 24px;
      display: inline-block;
      position: relative;
      top: 2px;
      .little {
        font-size: 14px;
        font-style: normal;
      }
    }
    .tip {
      font-size: 10px;
      color: #666;
    }
  }

  .info {
    button {
      .button-solid(#999,
      #ddd,
      transparent);
      font-size: 14px;
      padding: .3rem .5rem;
      &.can {
        color: #fff;
        background: #29B171;
      }
    }
  }
}

.times {
  padding: 1rem;
  border-bottom: 1px solid #eaeaea;
  font-size: 16px;
  >p {
    padding-left: 1rem;
    background: url('../../static/img/time.png') no-repeat left top;
    background-size: .6rem;
  }
}

.shop_more {
  display: flex;
  border-bottom: 1px solid #eaeaea;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;

  p {
    font-size: 14px;
    color: #666;
  }

  .left {
    width: 50%;
    padding: 2.5rem 0 1rem;
    border-right: 1px solid #eaeaea;
    background: url('../../static/img/power01.png') no-repeat center 1rem;
    background-size: 1.2rem;
  }

  .right {
    width: 50%;
    padding: 2.5rem 0 1rem;
    background: url('../../static/img/power02.png') no-repeat center 1rem;
    background-size: 1.2rem;
  }
}

.return_back {
  position: absolute;
  bottom: 2rem;
  width: 100%;
  height: 2rem;
  text-align: center;
  >button {
    .button-solid(#fff,
    transparent,
    #fff);
    width: 90%;
    border: 1px solid #d1d1d1;
    color: #888;
    font-size: 14px;
  }
}
</style>
